<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>轮播图</title>
    <style>
        .panda-carousel {
            width: 900px;
            display: flex;
            justify-content: center;
        }
        .panda-hide {
            display: none;
        }

        .panda-menu-content {
            height: 100px;
            border: 1px solid red;
        }

        .panda-item {
            /*display: inline-block;*/
            /*opacity: 0.6;*/
            filter: grayscale(100%);
        }

        .panda-item.panda-highlight {
            filter: initial;
            /*opacity: 1;*/
        }

        .panda-item.panda-highlight img {
            width: 150px;
            height: 150px;
        }

        img {
            /*transition 这个 css 指定了某个属性发生变化的时候自动使用动画效果和动画时间*/
            transition: width 1s, height 1s;
        }

        .panda-item img {
            width: 100px;
            height: 100px;
        }

        /*3. 轮播图*/
        .panda-slide {
            position: relative;
            width: 800px;
        }

        .panda-slide-image {
            display: none;
        }

        .panda-active {
            display: inline-block;
        }

        .panda-slide-button {
            width: 30px;
            height: 50px;
            color: #fff;
            background: black;
            opacity: 0.3;
            outline: 0;
            border: 0;
            cursor: pointer
        }

        .panda-left {
            left: 0;
        }

        .panda-right {
            right: 0;
        }

        /*用来垂直居中一个元素的套路 css*/
        .panda-vertical-center {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .panda-slide-dots {
            /*水平居中的套路*/
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
        }

        .panda-slide-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: red;
        }

        .panda-white {
            background: white;
        }
    </style>
</head>

<body>
    <!-- 轮播图 -->
    <div class="panda-carousel">
        <!-- data-imgs 是图片的总数 -->
        <!-- data-active 是当前显示的图片的下标 -->
        <div class="panda-slide" data-imgs="4" data-active="0">
            <img id="id-pandaimage-0" class="panda-slide-image panda-active" src="img/1.jpg" alt="">
            <img id="id-pandaimage-1" class="panda-slide-image" src="img/2.jpg" alt="">
            <img id="id-pandaimage-2" class="panda-slide-image" src="img/3.jpg" alt="">
            <img id="id-pandaimage-3" class="panda-slide-image" src="img/4.jpg" alt="">

            <button class="panda-slide-button panda-left panda-vertical-center" data-offset="-1">&lt;</button>
            <button class="panda-slide-button panda-right panda-vertical-center" data-offset="1">&gt;</button>

            <div class="panda-slide-dots">
                <div id="id-dot-0" class="panda-slide-dot panda-white" data-index="0"></div>
                <div id="id-dot-1" class="panda-slide-dot" data-index="1"></div>
                <div id="id-dot-2" class="panda-slide-dot" data-index="2"></div>
                <div id="id-dot-3" class="panda-slide-dot" data-index="3"></div>
            </div>
        </div>
    </div>
    <script src="./js/utils.js"></script>
    <script src="./js/carousel.js"></script>
</body>

</html>